<template>
	<div>
		<h1>人员列表</h1>
        <input type="text" placeholder="请输入名字" v-model="name" @keyup.enter="add"/>
        <button @click="add">添加</button>
		<ul v-for="p in personList" :key="p.id">
            <li>{{ p.name }}</li>
        </ul>
        <hr>
<!--        <ul v-for="(p2, index) in personList" :key="index">-->
<!--            <li>{{ p2.name }}</li>-->
<!--        </ul>-->
        <h1 style="color: red">Count 组件总数：{{sum}}</h1>
        <h1>人员列表中第一个人员的姓名：{{firstName}}</h1>
        <button class="btn btn-primary" @click="addNameFromServer">从服务器获取姓名然后添加</button>
	</div>
</template>

<script>
    import  {mapState,mapMutations} from 'vuex';
    import {nanoid} from "nanoid";
    export default {
		name:'Person',
		data(){
			return {
                name: '',
			}
		},
        methods:{
            add(){
                if (!this.name){
                    alert('请输入姓名')
                    return
                }
                //this.$store.state.personList.unshift({id: nanoid(4), name: this.name});
                this.$store.commit('b/ADD_PERSON',{id: nanoid(4),name:this.name,value:this.value})
                this.name = '';
            },
            ...mapMutations({'addNameFromServer':'b/addNameFromServer'})
        },
        computed:{
            ...mapState('b', ['personList']),
            ...mapState('a', ['sum']),
            firstName(){
                return this.$store.getters['b/firstName']
            }
        }
	}
</script>
